<template>
  <div>
    <!-- title -->
    <h2>资源管理</h2>

    <Divider />

    <div class="button-container margin-bottom-8">
      <Button type="primary" icon="md-refresh"
              @click="initData">刷新</Button>
      <Button v-if="hasPermissionEdit"
              type="primary" icon="md-add"
              @click="openCreateModal">添加</Button>
      <Button type="primary"
              :icon="expandAll ? 'ios-arrow-up' : 'ios-arrow-down'"
              ghost
              @click="openOrClose">{{ expandAll ? '全部收起' : '全部展开' }}</Button>
    </div>

    <tree-table stripe
                show-index
                :expand-type="false"
                :selectable="false"
                :is-fold="!expandAll"
                :columns="table.columns"
                :data="table.data">
      <template slot="icons" slot-scope="{ row }">
        <Icon :type="row.icon" color="#808695" :size="24"/>
      </template>
      <template slot="type" slot-scope="{ row }">
        <Tag color="blue">
          {{ $json.parse(row.type) ? $json.parse(row.type).description : '' }}
        </Tag>
      </template>
      <template slot="action" slot-scope="{ row }">
        <div class="button-container">
          <Button v-if="hasPermissionEdit"
                  type="primary" size="small"
                  @click="openUpdateModal(row.id)">编辑</Button>
          <Button v-if="hasPermissionDelete"
                  type="error" size="small"
                  @click="delResource(row.id)">删除</Button>
        </div>
      </template>
    </tree-table>

    <div style="margin-top: 8px">
      <a href="https://github.com/lison16/tree-table-vue"
         target="_blank">tree-table-vue文档</a>
    </div>

    <Create ref="createModal" @success="initData"></Create>
    <Update ref="updateModal" @success="initData"></Update>
  </div>
</template>

<script>
import { resourceTree, deleteResource } from '../../../apis/system/resource';

import Create from './components/create.vue';
import Update from './components/update.vue';

export default {
  name: 'resource',
  components: {
    Create,
    Update
  },
  data() {
    const columns = [
      {
        title: '资源名',
        key: 'name',
        minWidth: 300
      },
      {
        title: '图标',
        key: 'icon',
        type: 'template',
        template: 'icons',
        width: 200
      },
      {
        title: '权限字符串',
        key: 'permission',
        minWidth: 300
      },
      {
        title: '地址',
        key: 'url',
        minWidth: 300
      },
      {
        title: '类型',
        key: 'type',
        type: 'template',
        template: 'type',
        width: 100
      },
      {
        title: '排序',
        key: 'sort',
        width: 100
      }
    ];

    if (this.$permission.hasPermissions(['system:resource:edit', 'system:resource:delete'])) {
      columns.push({
        title: '操作',
        type: 'template',
        template: 'action',
        width: 180
      });
    }

    return {
      expandAll: false,
      table: {
        data: [],
        columns,
        loading: false
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.initData();
    },
    initData() {
      this.table.loading = true;
      resourceTree((responseData) => {
        this.table.loading = false;

        this.table.data = responseData;
      }, () => {
        this.table.loading = false;
      });
    },
    openOrClose() {
      this.expandAll = !this.expandAll;
    },
    openCreateModal() {
      this.$refs.createModal.openModal();
    },
    openUpdateModal(id) {
      this.$refs.updateModal.openModal(id);
    },
    delResource(id) {
      this.$Modal.confirm({
        title: '提示',
        content: '此操作将永久删除该数据及其子数据，是否继续？',
        loading: true,
        onOk: () => {
          deleteResource(id, () => {
            this.$Modal.remove();
            this.$Message.success('删除成功');
            this.initData();
          });
        }
      });
    }
  },
  computed: {
    hasPermissionEdit() {
      return this.$permission.hasPermissions(['system:resource:edit']);
    },
    hasPermissionDelete() {
      return this.$permission.hasPermissions(['system:resource:delete']);
    },
  },
};
</script>

<style scoped>

</style>
